<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            height: 10px;
            width: 150px;
        }

        input {
            width: 94%;
            /* height: 100%; */
        }

        .list {
            height: 660px;
            width: 150px;
            /* width: 200px; */

            /* box-sizing: border-box;
            padding: 0px;
            list-style: none; */
            /* background: url(images/line.png) right center no-repeat; */
            position: relative;
            /* overflow: auto; */
            background-color: #ccc;
            background-size: 50px;
            /* overflow: hidden; */
        }

        .iudio {
            height: 25px;
            width: 150px;
            /* background-color: #ccc; */
            margin: 1px 0;
        }

        .bo {
            /* height: 15px; */
            width: 150px;
            background-color: #ccc;
            margin: 1px 0;
        }

        .myaudio {
            height: 25px;
            width: 150px;
            /* background-color: #ccc; */

        }


        span {
            font-size: 16px;
            float: left;
            display: block;
            /* background-color: aqua; */
        }

        span:nth-child(1) {
            /* display: block; */
            float: right;
        }

        li {
            font-size: 12px;
            /* text-overflow: ellipsis;
            cursor: pointer; */
            list-style: none;
            /* white-space: nowrap; */
            margin: 1px 0;
            /* background-color: #999; */
            /* width: 100%; */
            font-size: 12px;
            /* color: #333; */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            margin-left: -38px;
            text-align: center;

        }
    </style>
</head>

<body>
    <div class="top">
        <input type="text">
    </div>
    <div class="list">
        <ul>
            <li class="1357999885">
                请你吃个冰激凌
            </li>
            <li class="1358035181">
                落霜
            </li>

            <li class="1357999894">
                归去来兮
            </li>

            <li class="557581284">
                纸短情长
            </li>
            <li class="1386711763">
                远在北方孤独的鬼
            </li>
            <li class="1386711762">
                20岁的某一天
            </li>

            <li class="574566207">
                盗将行
            </li>

            <li class="450853439">
                遥不可及的你
            </li>
            <li class="1307411242">
                我说我当不了县长
            </li>

            <li class="419375655">
                南来北往
            </li>


            <li class="1336866698">
                浮白
            </li>


            <li class="419373705">
                只不过是
            </li>


            <li class="571601379">
                海盗船长2.0
            </li>

            <li class="1313107233">
                活该
            </li>

            <li class="1465288939">
                蚍蜉
            </li>
            <li class="247169">
                妈妈要我出嫁
            </li>
            <li class="1449339372">
                庸人自扰之
            </li>



            <li class="1313354324">
                出山
            </li>

            <li class="1357999898">
                山中客
            </li>

            <li class="1466062358">
                夜问
            </li>

            <li class="1367867672">
                是红
            </li>

            <li class="1466062301">
                完美先生和差不多小姐
            </li>
            <li class="1378234698">
                荒唐戏
            </li>
            <li class="1451744552">
                早起歌
            </li>
            <li class="460542191">
                一腔诗意喂了狗
            </li>

            <li class="247177">
                远在北方孤独的鬼
            </li>


            <li class="247172">
                二十岁的某一天
            </li>


            <li class="1382757155">
                安眠咒
            </li>

            <li class="1319225007">
                我抬头一看满街都是单身的狗
            </li>

            <li class="1386710664">
                小相思
            </li>
            <li class="1369588040">
                多喝热水
            </li>

        </ul>

    </div>
    <div class="iudio">
        <audio id="audio" controls="true" autoplay="true" controls autoplay loop class="myaudio"></audio>
    </div>
    <div class="bo">

        <span class="xia">
            <a href="#"> ⏭ </a>
        </span>

        <span class="shang">
            <a href="#"> ⏮</a>
        </span>

    </div>
</body>

</html>
<script src="./lib/jquery-1.12.4.js"></script>
<script src="./lib/template-web.js"></script>
<!-- 模板引擎 -->
<script type="css/html" id="tp-1">
    {{each songs}}
    <li class="{{$value.id}}">
      {{$value.name}}
    </li>
    {{/each}}
  </script>
<script>
    $(function () {
        // 添加键盘事件
        let name = $('input').val('')
        $('input').on('keydown', function (e) {
            if (e.keyCode == 13) {
                // 判断非空
                name = $(this).val().trim();
                if (name == '') {
                    return
                }
                // ajax 
                $.ajax({
                    type: 'get',
                    url: 'https://autumnfish.cn/search',
                    data: {
                        keywords: name
                    },
                    success: function (backData) {
                        // console.log(backData);
                        if (backData.code == 200) {
                            let htmlStr = template('tp-1', backData.result)
                            $('ul').html(htmlStr)
                            $('input').val('')
                        }
                    }
                })
            }
        })
        // 给li添加点击事件
        let i = 0
        $('ul').on('click', 'li', function () {
            $(this).css('backgroundColor', 'yellowgreen').siblings().css('backgroundColor', '')
            i = $(this).index()
            let id = $(this).attr('class')
            // 发起Ajax请求
            $.ajax({
                url: 'https://autumnfish.cn/song/url',
                data: {
                    id: id
                },
                success: function (backData) {
                    if (backData.code == 200) {
                        $('audio').attr('src', backData.data[0].url);
                    }
                }
            })
        })
        // 一曲播放完监听事件
        var audio = document.getElementById("audio");
        audio.loop = false;
        audio.addEventListener('ended', function () {
            // let i = Math.ceil(Math.random() * 10);

            $('li').eq(i + 1).click()
            console.log(i + '播放完');

        }, false);
        // 下一首点击事件
        $('.xia').on('click', function (e) {
            e.preventDefault()
            if ($("li").length == i + 1) {
                $('li').eq(0).click()
            } else {
                $('li').eq(i + 1).click()
            }
            console.log($("li").length);
            // console.log(i);
        })
        // 上一首点击事件
        $('.shang').on('click', function (e) {
            e.preventDefault()
            if ($("li").length == 0) {
                $('li').eq(i).click()
            } else {
                $('li').eq(i - 1).click()
            }
        })
    })

</script>